<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/from/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../css/from/bootstrap-select.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/from/global.js"></script>
    <script type="text/javascript" src="../../js/from/jquery.smart-form.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-select.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/from/jquery.validate.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/from/jQuery-Validate-Extend.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>
<body>
    <div class="container-fluid">
        <button id="btn_save"></button>
        <form id="itemForm1"></form>
    </div>
</body>
<script>
    var form1//表单
    var userdata = [];//测试数据
    var depdata = [];//测试数据
    var Modal1;
    $(document).ready(function () {
        //绘制panel
        //InitPanel2();
        //绘制表单
        InitForm1();
        new bsEx.Button({text:"保存",btntype:"primary",renderto:"#btn_save"})
        form1.setFormData({
            "taskCode": "",//单号
            "taskMakedate": "2017-01-01",//日期
            "taskMakeuser": "2",//人员
            "taskMakedep": "1",//部门
            "tasknub": "",//数量
            "taskprice": "3",//价格
            "taskfield1": "赚了好几万"//备注
        });

        //得到值
        $("#btn_save").click(function () {
            form1.valid();
        })
    });
    
    function InitPanel2(){
        var panel2 =new bsEx.Panel({
            renderto:"#panel2",
            title:"表单验证",
            body: '<form id="itemForm1"></form>',
            btns:[{id:"btn_save",text:"保存",btntype:"primary"},{id:"btn_close",text:"取消"}]
        });
    }

    //绘制表单
    function InitForm1() {
        //清空
        //$('#itemForm1').html('');
        //创建控件
        form1 = new bsEx.ItemForm("#itemForm1");
        //表单项
        form1.items = [
            { type: 'text', name: 'taskCode', title: '单号' },
            { type: 'datetime', name: 'taskMakedate', title: '制单日期' },
            { type: 'select', name: 'taskMakeuser', title: '制单人', select: { data: userdata, tree: false } },
            { type: 'select', name: 'taskMakedep', title: '制单部门', select: { data: depdata, tree: true } },
            { type: 'numbertxt', name: 'tasknub', title: '数量' },
            { type: 'floattxt', name: 'taskprice', title: '价格' },
            { type: 'textarea', name: 'taskfield1', title: '备注', oneline: true }
        ];
        //需要验证的字段
        form1.requireds = ["taskCode","tasknub"];
        //是否启用验证
        form1.validate = true;
        //弹出验证提示配置
        form1.depopover = {placement:"auto top"};
        //生成几列
        form1.colunb = 4;//列数
        //开始绘制
        form1.init();
    }
    //得到测试数据
    (function gettestdata() {
        $.ajax({
            url: "../../Data/fromtest_user.json",//json文件位置
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            async: false,
            success: function (data) {//请求成功完成后要执行的方法 
                userdata = data;
            }
        })
        $.ajax({
            url: "../../Data/fromtest_dep.json",//json文件位置
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            async: false,
            success: function (data) {//请求成功完成后要执行的方法 
                depdata = data;
            }
        })
    })();
</script>
</html>